<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RustU</title>
        <link rel="stylesheet" href="styles.css" />
        <link rel="stylesheet" type="text/css" href="/assets/css/paper.css" />
        <link
            rel="stylesheet"
            type="text/css"
            href="/assets/css/bootstrap.min.css"
        />
        <script
            type="text/javascript"
            src="/assets/js/bootstrap.bundle.min.js"
        ></script>
        <style>
            .content-wrap {
                min-height: calc(100% - 90px);
                /* 60px是footer的高度，可根据实际情况调整 */
                margin-bottom: -90px;
                /* 负margin等于footer的高度，避免内容被footer遮挡 */
            }

            html,
            body {
                height: 100%;
                margin: 20px;
                /*background-image: linear-gradient(
                    -225deg,
                    #231557 0%,
                    #44107a 29%,
                    #ff1361 67%,
                    #fff800 100%
                );*/
            }

            a {
                text-decoration: none;
            }

            ,
            .blaok_blog {
                width: 25rem;
                min-height: 550px;
                margin-top: 20px;
            }

            footer {
                height: 60px;
                /* 设置footer的高度 */
                text-align: center;
                padding: 20px 0;
                position: relative;
                margin-top: 80px;
                /* 与min-height一起确保footer在内容不足时也能置底 */
            }
        </style>
    </head>

    <body>
        <section class="content-wrap">
            <div class="container">
                <div class="row">
                    <div class="col">
                        {% for article in vec1 %}
                        <div
                            class="card shadow white blaok_blog text-break"
                            style="min-height: 180px; margin-top: 25px"
                        >
                            <a
                                href="/article/{{article.id|e}}"
                                class="card-body"
                            >
                                <h4 class="card-title">{{article.title|e}}</h4>
                                <p class="card-text">{{article.summary|e}}</p>
                            </a>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="col">
                        {% for article in vec2 %}
                        <div
                            class="card shadow blaok_blog text-break"
                            style="min-height: 180px; margin-top: 25px"
                        >
                            <a
                                href="/article/{{article.id|e}}"
                                class="card-body"
                            >
                                <h4 class="card-title">{{article.title|e}}</h4>
                                <p class="card-text">{{article.summary|e}}</p>
                            </a>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="col">
                        {% for article in vec3 %}
                        <div
                            class="card shadow blaok_blog text-break"
                            style="min-height: 180px; margin-top: 25px"
                        >
                            <a
                                href="/article/{{article.id|e}}"
                                class="card-body"
                            >
                                <h4 class="card-title">{{article.title|e}}</h4>
                                <p class="card-text">{{article.summary|e}}</p>
                            </a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>

        <section class="section pt-0">
            <div class="row mt-3">
                <div class="col-4"></div>
                <div class="col-4">
                    <nav aria-label="Page navigation example" class="pos">
                        <ul class="pagination justify-content-center">
                            <li class="page-item">
                                <a
                                    id="prePage"
                                    class="page-link"
                                    href="#"
                                    aria-label="Previous"
                                >
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item" id="page1">
                                <a class="page-link" href="/list/1">1</a>
                            </li>
                            <li class="page-item">
                                <a
                                    id="nextPage"
                                    class="page-link"
                                    href="#"
                                    aria-label="Next"
                                >
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div class="col-4"></div>
            </div>
        </section>
        <footer>
            <p>
                粤公网安备44011802000978号 ICP备案： 粤ICP备2024315825号-1
                &copy; 2024 你我同锈. All rights reserved.
            </p>
        </footer>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>

        <script>
            function reloadPages() {
                var current_page = {{page_num}};
                var page_total = {{page_total}};

                //nextPage and prePage control
                if (page_total === 1) {
                    $("#nextPage").addClass("disabled");
                    $("#prePage").addClass("disabled");
                } else if (current_page === 1) {
                    $("#prePage").addClass("disabled");
                } else if (current_page === page_total) {
                    //next page invalid
                    $("#nextPage").addClass("disabled");
                }
                // the page number control, 最多显示10页
                var page_range = Math.floor(current_page / 10);
                var current_page_min_num = Number.parseInt(page_range) * 10 + Number.parseInt(1);
                console.log("parseInt(page_range)+1=" + current_page_min_num);
                var current_page_max_num = page_range * 10 + 10;
                if (current_page_max_num >= page_total) {
                    current_page_max_num = page_total;
                }
                if (current_page_min_num > 10) {
                    $("#prePage").attr("href", "/list/" + (current_page_min_num - 1));
                }
                if (current_page_max_num < page_total) {
                    console.log("set nextpage: " + current_page_max_num);
                    $("#nextPage").attr("href", "/list/" + (current_page_max_num + 1));
                }

                console.log("current_page_max_num   " + current_page_max_num);
                $("#page1").html("<a class='page-link' href='/list/" + current_page_min_num + "'>" + current_page_min_num + "</a>");
                console.log("current_page_min_num+1=" + parseInt(current_page_min_num) + 1);
                var nodes = "";
                for (var i = current_page_min_num + 1; i <= current_page_max_num; i++) {
                    nodes += "<li class='page-item' ><a class='page-link'  href='/list/" + i + "'>" + i + "</a></li>"
                }
                $("#page1").after(nodes);


            }



            window.addEventListener('load',
                reloadPages()
            );
        </script>
    </body>
</html>
